<template>
  <div class="login-page">
    <h1 class="page-title">手机登录页</h1>
    <div class="login-form">
      <div class="input-container">
        <input id="txt_phone_number" type="text" v-model="phoneNumber" placeholder="请输入手机号"
               class="input-field phone-input"/>
      </div>
      <div class="input-container">
        <input id="txt_captcha" type="text" v-model="verificationCode" placeholder="请输入验证码"
               class="input-field verification-code-input"/>
        <button @click="sendVerificationCode" :disabled="countdown > 0" class="btn verification-code-btn">{{
            buttonText
          }}
        </button>
      </div>
      <div class="input-container">
        <button id="btn_login" @click="login" :disabled="loggingIn" class="btn login-btn">登录</button>
      </div>

      <div class="message-container">
        <div id="txt_message" class="message">{{ message }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, Ref} from 'vue';
import axios, {AxiosInstance} from 'axios';

const axiosInstance: AxiosInstance = axios.create({
  baseURL: 'http://127.0.0.1:6605/mock',
  timeout: 10000,
});

const phoneNumber: Ref<string> = ref('');
const verificationCode: Ref<string> = ref('');
const countdown: Ref<number> = ref(0);
const buttonText: Ref<string> = ref('发送验证码');
const message: Ref<string> = ref('');
const loggingIn: Ref<boolean> = ref(false); // 控制登录按钮状态

function sendVerificationCode(): void {
  if (!phoneNumber.value) {
    alert('请输入手机号');
    return;
  }
  // 发送验证码逻辑
  countdown.value = 60; // 假设发送验证码需要60秒
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      buttonText.value = '发送验证码';
    } else {
      buttonText.value = `${countdown.value}秒后重新发送`;
    }
  }, 1000);
}

async function login() {
  // 开始登录时禁用按钮
  loggingIn.value = true;

  // 登录逻辑
  const {data} = await axiosInstance.post('/user/login/by-mobile-phone', {
    "mobilePhoneNo": phoneNumber.value,
    "captchaCode": verificationCode.value
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  });

  if (Array.isArray(data)) {
    message.value = data.join(', ');
  } else {
    message.value = data;
  }

  loggingIn.value = false;
}
</script>

<style scoped>
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.input-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.phone-input, .verification-code-input {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.verification-code-btn, .login-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.verification-code-btn:disabled {
  background-color: #ccc;
}

.verification-code-btn:hover, .login-btn:hover {
  background-color: #0056b3;
}

.login-btn:disabled {
  background-color: #ccc;
}

.message-container {
  margin-top: 20px;
}

.message {
  color: red;
}
</style>
